<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <div>
      <div style="font-size: large;color: skyblue;margin: 10px 20px 10px 20px">
        这是学生管理的页面
      </div>
      <button v-on:click="getAllUsers" style="margin: 10px 20px 10px 20px">
        获取所有学生
      </button>
      <div v-for="user in users" v-bind:key = user.id style="margin: 10px 20px 10px 20px;font-size: small">
        {{user}}
      </div>
    </div>
    <div>
      <div style="margin: 10px 20px 10px 20px">
        请输入要查询用户信息的id：<br>
        <input v-model="queryId">
      </div>
      <button v-on:click="getUserById" style="margin: 10px 20px 10px 20px">
        通过id获取指定学生
      </button>
      <div style="margin: 10px 20px 10px 20px;font-size: small">
        {{userById}}
      </div>
    </div>
    <div style="float: left">
      <div style="margin: 10px 20px 10px 20px">
        请输入要添加的学生信息：
        <div style="margin: 10px 20px 10px 20px">
          student_id<br>
          <input v-model="student_id">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          name<br>
          <input v-model="name">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          class<br>
          <input v-model="s_class">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          telephone<br>
          <input v-model="telephone">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          qq<br>
          <input v-model="qq">
        </div>
      </div>
      <button v-on:click="addUser" style="margin: 10px 20px 10px 20px">
        添加用户
      </button>
    </div>
    <div style="float: left">
      <div style="margin: 10px 20px 10px 20px">
        请输入要修改的学生信息：
        <div style="margin: 10px 20px 10px 20px">
          id<br>
          <input v-model="id">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          student_id<br>
          <input v-model="student_id">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          name<br>
          <input v-model="name">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          class<br>
          <input v-model="s_class">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          telephone<br>
          <input v-model="telephone">
        </div>
        <div style="margin: 10px 20px 10px 20px">
          qq<br>
          <input v-model="qq">
        </div>
      </div>
      <button v-on:click="updateUser" style="margin: 10px 20px 10px 20px">
        修改用户
      </button>
    </div>
    <div style="float: left">
      <div style="margin: 10px 20px 10px 20px">
        请输入要删除的用户信息的id：
        <div style="margin: 10px 20px 10px 20px">
          id<br>
          <input v-model="id">
        </div>
      </div>
      <button v-on:click="deleteUser" style="margin: 10px 20px 10px 20px">
        删除用户
      </button>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "UserPage",

  data(){
    return{
      users: null,
      queryId: null,
      userById: null,
      student_id: null,
      name: null,
      s_class: null,
      telephone: null,
      qq: null,
      id: null
    }
  },
  methods: {
    getAllUsers(){
      axios.get("http://localhost:8079/users")
          .then(resp => {
            console.log(resp);
            this.users = resp.data;
          })
    },
    getUserById(){
      axios.get(`http://localhost:8079/user/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.userById = resp.data;
          })
    },
    addUser(){
      axios.post("http://localhost:8079/user",{
        student_id: this.student_id,
        name: this.name,
        s_class: this.s_class,
        telephone: this.telephone,
        qq: this.qq
      }).then(resp => {
        console.log(resp);
      })
    },
    updateUser(){
      axios.put("http://localhost:8079/user",{
        id: this.id,
        student_id: this.student_id,
        name: this.name,
        s_class: this.s_class,
        telephone: this.telephone,
        qq: this.qq
      }).then(resp => {
        console.log(resp);
      })
    },
    deleteUser(){
      axios.delete(`http://localhost:8079/user/${this.id}`)
         .then(resp => {
            console.log(resp);
          })
    }
  }
}
</script>
<style scoped>
</style>
}